import React, { Component } from "react";

import {
  Space,
  Card,
  Tag,
  Row,
  Col,
  Spin,
  message,

  List,
} from "antd";
import {  Link } from "react-router-dom";
import Header from "../../components/header";
import Footer from "../../components/footer";
import {
  TagsOutlined,
  NotificationOutlined,
} from "@ant-design/icons";
import "./study.css";
import moment from "moment";

import { _homeCourseList } from "../../utils/course/index";
export default class index extends Component {
  state = {
    isLoading: false,
    courseList: [],
  };
  onChange(a, b, c) {
    console.log(a, b, c);
  }
  getData = () => {
    this.setState({ isLoading: true });
    _homeCourseList()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          this.setState({ courseList: res.data.data });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  componentDidMount = () => {
    this.getData();
  };
  render() {
    return (
      <div>
        <div className="all-container">
          <Header />
          <div className="all-body">
            <Row justify="center">
              <Col span={15} className="comm-left">
                <div className="h-news">
                  <Spin tip="Loading..." spinning={this.state.isLoading}>
                    <List
                      itemLayout="vertical"
                      size="large"
                      header={
                        <Space style={{ marginLeft: ".3rem" }}>
                          <NotificationOutlined />
                          学习教程
                        </Space>
                      }
                      pagination={{
                        onChange: (page) => {
                          console.log(page);
                        },
                        pageSize: 5,
                      }}
                      dataSource={this.state.courseList}
                      renderItem={(item) => (
                        <List.Item
                          key={item.course_id}
                          extra={
                            <Link
                              to={{
                                pathname: "/lc-d",
                                state: item,
                              }}
                            >
                              {"查看"}
                            </Link>
                          }
                        >
                          <List.Item.Meta
                            title={item.course_title}
                            description={
                              <Space>
                                <Tag color="blue">{item.tch_name}</Tag>
                                <div>
                                  {moment(item.course_time).format(
                                    "YYYY-MM-DD HH:mm"
                                  )}
                                </div>
                              </Space>
                            }
                          />
                        </List.Item>
                      )}
                    />
                  </Spin>
                </div>
              </Col>
              <Col span={5} className="comm-right">
                <div>
                  <Card
                    title={
                      <Space>
                        <TagsOutlined />
                        热门标签
                      </Space>
                    }
                  >
                    <div className="s-tag">
                      <Tag color="magenta">人工智能</Tag>
                      <Tag color="red">机器学习</Tag>
                      <Tag color="volcano">深度学习</Tag>
                      <Tag color="orange" style={{ marginTop: ".5rem" }}>
                        NLP
                      </Tag>
                      <Tag color="gold" style={{ marginTop: ".5rem" }}>
                        目标检测
                      </Tag>
                      <Tag color="lime" style={{ marginTop: ".5rem" }}>
                        语音处理
                      </Tag>
                      <Tag color="green" style={{ marginTop: ".5rem" }}>
                        图像修复
                      </Tag>
                      <Tag color="cyan" style={{ marginTop: ".5rem" }}>
                        强化学习
                      </Tag>
                      <Tag color="blue" style={{ marginTop: ".5rem" }}>
                        智能机器人
                      </Tag>
                      <Tag color="geekblue" style={{ marginTop: ".5rem" }}>
                        语音识别
                      </Tag>
                      <Tag color="purple" style={{ marginTop: ".5rem" }}>
                        图像识别
                      </Tag>
                    </div>
                  </Card>
                </div>
              </Col>
              <Col></Col>
            </Row>
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}
